<template>
	<div>
		<div class="word-container">
			<div class="forts">
				学生年龄统计
				<el-button @click='goBack()' class="back-button">
					返回首页
				</el-button>
			</div>
			<Time class="forts-time" />
		</div>

		<!-- 学生信息输出表 -->
		<div class="table-bar">
			<el-table ref="age-static-table" :data="tableData" border height="500" style="width: 73%">
				<el-table-column v-model="tableData.sage" prop="Sage" label="年龄" width="508">
				</el-table-column>
				<el-table-column v-model="tableData.count" prop="Count" label="数量" width="500">
				</el-table-column>
			</el-table>
			<el-button type="primary" @click="age_search()">统计</el-button>
		</div>

		<img src="../assets/logo.png" alt="" />
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import Time from "./Time.vue";
	import {
		defineComponent,
		ref
	} from 'vue';
	export default {
		name: "AgeStatic",
		components: {
			Time,
			defineComponent,
			ref,
		},
		// 数据
		data() {
			return {
				tableData: []
			}
		},
		methods: {
			goBack() {
				//直接跳转
				this.$router.push('/main');
			},
			age_search() {
				ElMessage.success({
					message: '查询成功',
					type: 'success',
				})
				this.axios.post('http://localhost:8081/statistic/age').then(response => {
					this.tableData = response.data
				})
			}
		},
	}
</script>

<style>
</style>
